<template>
	<view class="container">
		<view
			class="flex justify-between bg-white align-center padding-bottom padding-top padding-left-sm padding-right-sm">
			<view class="text-15 color">
				当前积分 {{score}}
			</view>
			<view class="flex justify-start align-center">
				<view class="text-df text-999"  @click="toPage('/filePage/pages/exchangeList/exchangeList')">
					兑换记录
				</view>
				<view class="cuIcon-right">

				</view>
			</view>
		</view>
		<view class="flex flex-wrap justify-start margin-left-sm margin-right-sm margin-bottom-sm">
			<view @click="toPage('/filePage/pages/goods-detail/goods-detail?id=' + item.productId)" class="list bg-white radius10 margin-top-sm"
				v-for="(item,index) in list" :class="{'margin-left14':index%2}">

				<image :src="item.productPic" mode="" class="width-sub"></image>
				<view class="padding-sm">
					<view class="text-cut-2 text-15 text-333">
						{{item.productName}}
					</view>
					<view class="flex justify-start align-center" @click.stop="submit(item)">
						<button
							class="bg-to-right2 text-white btn text-sm margin-top round">{{item.exchangePoints}}积分兑换</button>
					</view>

				</view>

			</view>
		</view>
		<view class="popup" v-if='show' @click="checkType">
			<view class="mask" @click.stop="">
				<view class="title">选择收货地址</view>
				<view class="content">
					<block v-if='address.length!=0'>
						<!-- <radio-group @change="RadioChange"> -->

							<view class="address-list" v-for='(item,index) in address' :key='index' @click="chooseaddress(item)">
								<view style="width: 40rpx;">
									<block v-if='selectedIndex==item.id'>
										<image  class="radio yellow" src="https://super.zoyob.com/static/active.png"></image>
										<!-- <radio class="radio yellow" :checked="item.id==selectedIndex" :value="item.id"></radio> -->
									</block>
									<block v-else>
										<image class="radio yellow" src="https://super.zoyob.com/static/default.png"></image>
										<!-- <radio class="radio yellow" :checked="item.isdefault" :value="item.id"></radio> -->
									</block>
									
								</view>
								
								<view class="info">
									<view class="address">{{item.addressInfo}}</view>
									<view class="infomation">
										<text class="nickname">{{item.receiver}}</text>
										<text class="mobile">{{item.mobile}}</text>
									</view>
								</view>
							</view>

						<!-- </radio-group> -->
					</block>
					<block v-else>

					</block>

				</view>
				<view class="wxpay">
					<view class="confirm" @click="exchange">兑换</view>
				</view>

			</view>
		</view>
		<uni-load-more :status="loading" />
	</view>
</template>

<script>
	import BetterPull from '@/common/util/BetterPull'
	export default {
		mixins: [
			BetterPull({
				async getPage(page, done) {
					this.loading = 'loading';
					let api = ''
					const obj = {
						pageNum: page,
						pageSize: 10,
					}
					const [err, res] = await this.$get(this.$api.scoreExchangeList, obj)
					if (res) {
						var data = res.data.list
						done(data);
						if (data.length < 10) {
							this.loading = 'noMore';
						} else {
							this.loading = 'more';
						}

					}
					if (err) {
						done([]);
						this.loading = 'noMore';
					}
				}
			})
		],
		data() {
			return {
				baseUrl: this.$config.baseUrl,
				loading: "more",
				userInfo: {},
				radio: 1,
				show: false,
				address: [],
				obj: {},
				score: '',
				selectedIndex:''

			};
		},
		onLoad() {
			this.getAddress()
		},

		onShow() {
			this.userInfo = uni.getStorageSync('userInfo')
			
			this.getUser()
		},

		methods: {
			toPage(url) {
				console.log(url)
				uni.navigateTo({
					url
				})
			},
			// RadioChange(e) {
   //                 console.log(e)
			// 	this.radio = e.detail.value;
			// 	this.obj['userAddressId'] = e.detail.value
			// 	this.selectedIndex = e.detail.value
			// 	console.log(this.obj)
			// },
			chooseaddress(item){
				this.obj['userAddressId'] = item.id;
				this.selectedIndex = item.id;
			},
			exchange() {
				const that = this
				uni.showModal({
					content: '你确定兑换该积分商品吗',
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
							that.$jsonPost(that.$api.pointCreate, that.obj).then(res => {
								const [err, rs] = res
								if (rs) {
									console.log(rs)
									that.$get(that.$api.pointPay, {
										orderPointId: rs.data.id
									}).then(res => {
										const [err, rs] = res
										if (rs) {
											that.$util.msg(rs.message)
											that.Refresh()
											that.show = false
											that.getUser()

										}
									})
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			checkType() {
				this.show = !this.show

			},
			async getAddress() {
				const obj = {
					pageNum: 1,
					pageSize: 999,
					userId: uni.getStorageSync('userId')
				}
				const [err, res] = await this.$get(this.$api.addressList, obj)
				if (res) {
					this.address = res.data.list
					let data = this.address.find(val => val.isdefault == 1)
					if (data) {
						this.obj['userAddressId'] = data.id;
						this.selectedIndex = data.id;
					}
				}
			},
			submit(item) {
				this.show = true
				this.obj['productId'] = item.productId
				this.obj['productName'] = item.productName
				this.obj['productPic'] = item.productPic
				this.obj['usePoints'] = item.exchangePoints
				this.obj['deliverType'] = 1
				console.log(this.obj)

			},
			async getUser() {
				const [err, rs] = await this.$get(this.$api.userDetail)
				if (rs) {
					this.score = rs.data.points
				}
			}
		},

	}
</script>

<style lang="scss" scoped>
	.list {
		width: 348rpx;
		min-width: 348rpx;

		image {
			height: 348rpx;
		}

		.btn {
			padding: 14rpx 26rpx;
			min-width: 174rpx;
		}
	}

	.popup {
		position: fixed;
		left: 0;
		top: 0;
		bottom: 0;
		right: 0;
		background: rgba(0, 0, 0, .3);

		.mask {
			position: absolute;
			left: 0;
			right: 0;
			top: 30%;
			bottom: 0;
			background-color: #fff;
			border-top-left-radius: 30rpx;
			border-top-right-radius: 30rpx;
			padding: 30rpx;
			padding-bottom: 0;

			.title {
				text-align: center;
				margin-bottom: 60rpx;
			}

			button {}

			.content {
				overflow: auto;
				height: calc(100% - 240rpx);
				margin-bottom: 40rpx;
			}

			.wxpay {
				height: 80rpx;
				margin: 0 80rpx;
			}

			.confirm {
				background: linear-gradient(90deg, #F16347, #EE0979);
				height: 100%;
				border-radius: 20rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				color: #fff;
			}

			radio-group {
				width: 100%;
			}
			.radio{
				width: 40rpx;
				height: 40rpx;
				background-size: 100%;
			}
			.address-list {
				display: flex;
				align-items: center;
				margin-bottom: 30rpx;
				width: 100%;

				.info {
					margin-left: 30rpx;
					

					.address {
						width: 520rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}

					.infomation {
						margin-top: 15rpx;
						color: #999;

						.mobile {
							margin-left: 10rpx;
						}
					}
				}
			}
		}
	}
</style>
